<template>
	<view class="list_agreement_signing" style="background-color: #fff;">
		<!-- 表格 -->
		<view class="list_agreement_signing_table">
			<view class="btn_change_table" @click="change_show()">
				{{ title }}
			</view>
			<view class="agreement_signing_table_block" v-show="is_opened">
				<uni-table stripe border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th v-if="$check_index_field('get','title','/agreement_signing/list')" align="center">标题</uni-th>
						<uni-th v-if="$check_index_field('get','user','/agreement_signing/list')" align="center">用户</uni-th>
						<uni-th v-if="$check_index_field('get','full_name','/agreement_signing/list')" align="center">姓名</uni-th>
						<uni-th v-if="$check_index_field('get','gender','/agreement_signing/list')" align="center">性别</uni-th>
						<uni-th v-if="$check_index_field('get','age','/agreement_signing/list')" align="center">年龄</uni-th>
						<uni-th v-if="$check_index_field('get','contact_number','/agreement_signing/list')" align="center">联系电话</uni-th>
						<uni-th v-if="$check_index_field('get','adoption_address','/agreement_signing/list')" align="center">领养地址</uni-th>
						<uni-th v-if="$check_index_field('get','id','/agreement_signing/list')" align="center">身份证</uni-th>
						<uni-th v-if="$check_index_field('get','agreement_opinion','/agreement_signing/list')" align="center">协议意见</uni-th>
						<uni-th align="center">点赞</uni-th>
						<uni-th align="center">点击数</uni-th>
						<uni-th align="center">创建时间</uni-th>
						<uni-th align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(o, i) in list" :key="i">
						<uni-td v-if="$check_index_field('get','title','/agreement_signing/list')" class="text" align="center">
							{{ o["title"] }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','user','/agreement_signing/list')" class="text" align="center">
							{{ get_user_user(o['user']) }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','full_name','/agreement_signing/list')" class="text" align="center">
							{{ o["full_name"] }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','gender','/agreement_signing/list')" class="text" align="center">
							{{ o["gender"] }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','age','/agreement_signing/list')" class="text" align="center">
							{{ o["age"] }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','contact_number','/agreement_signing/list')" class="text" align="center">
							{{ o["contact_number"] }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','adoption_address','/agreement_signing/list')" class="text" align="center">
							{{ o["adoption_address"] }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','id','/agreement_signing/list')" class="text" align="center">
							{{ o["id"] }}
						</uni-td>
						<uni-td v-if="$check_index_field('get','agreement_opinion','/agreement_signing/list')" class="text" align="center">
							{{ o["agreement_opinion"] }}
						</uni-td>
						<uni-td align="center">{{ o["praise_len"] }}</uni-td>
						<uni-td align="center">{{ o["hits"] }}</uni-td>
						<uni-td align="center">{{ $toTime(o["create_time"],"yyyy-MM-dd hh:mm:ss") }}</uni-td>
						<uni-td align="center">
							<view @click="to_nav(o['agreement_signing_id'])" style="cursor: pointer;">查看详情</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<!-- /表格 -->

		<!-- 视图 -->
		<view class="agreement_signing_block box_wrap" v-show="!is_opened">
			<navigator class="item_agreement_signing box_style" v-for="(o, i) in list"  :key="i" :url="'/pages/agreement_signing/details?agreement_signing_id=' + o['agreement_signing_id']">
				<view class="view" v-if="0 && $check_index_field('get','title','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>标题</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["title"] }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','user','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>用户</span>
					</view>
					<view class="diy_field time" >
						<span>{{ get_user_user(o['user']) }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','full_name','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>姓名</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["full_name"] }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','gender','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>性别</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["gender"] }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','age','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>年龄</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["age"] }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','contact_number','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>联系电话</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["contact_number"] }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','adoption_address','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>领养地址</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["adoption_address"] }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','id','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>身份证</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["id"] }}</span>
					</view>
				</view>
				<view class="view" v-if="0 && $check_index_field('get','agreement_opinion','/agreement_signing/list')">
					<view class="title" v-if="true">
						<span>协议意见</span>
					</view>
					<view class="diy_field text" >
						<span>{{ o["agreement_opinion"] }}</span>
					</view>
				</view>
				<view class="bottom-view">
					<view class="praise-title">点赞数<span>{{ o["praise_len"] }}</span></view>
					<view class="hits-title">点击数<span>{{ o["hits"] }}</span></view>
				</view>
				<view class="view">
					<view class="create_time_block diy_field number">
						<span>{{ $toTime(o["create_time"],"yyyy-MM-dd hh:mm:ss") }}</span>
					</view>
				</view>
			</navigator>
		</view>
		<!-- /视图 -->
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				is_opened: false,
				title: '切换成表格',
				// 用户列表
				list_user_user: [],
			}
		},
		methods: {
			/**
			 *  跳转链接
			 *  @param {Object} id
			 */
			to_nav(id) {
				this.$nav('/pages/agreement_signing/details?agreement_signing_id=' + id)
			},

			/**
			 *  切换显示
			 */
			change_show() {
				this.is_opened = !this.is_opened;
				if (this.is_opened === true) {
					this.title = '切换成列表';
				}
				else{
					this.title = '切换成表格';
				}
			},
			/**
			 * 获取普通用户用户列表
			 */
			async get_list_user_user() {
				var json = await this.$get("~/api/user/get_list?user_group=普通用户");
				if(json.result && json.result.list){
					this.list_user_user = json.result.list;
				}
				else if(json.error){
					console.error(json.error);
				}
			},
			get_user_user(id){
				var obj = this.list_user_user.getObj({"user_id":id});
				var ret = "";
				if(obj){
					ret = obj.nickname+"-"+obj.username;
					// if(obj.nickname){
					// 	ret = obj.nickname;
					// }
					// else{
					// 	ret = obj.username;
					// }
				}
				return ret;
			},
		},
		created() {
			this.get_list_user_user();
		}
	}
</script>

<style scoped>
	.list_agreement_signing {
		/* padding: 0 1rem; */
		margin-bottom: 1rem;
	}

	.list_agreement_signing .list_agreement_signing_table {
		width: 100%;
		padding: 5px 0;
	}

	.list_agreement_signing .list_agreement_signing_table .btn_change_table {
		margin-left: auto;
		font-weight: bold;
		padding: 0.5rem 0;
		width: 100px;
		text-align: center;
		font-size: 0.875rem;
		border: 1px solid #CCCCCC;
		border-radius: 1rem;
		margin-bottom: 0.25rem;
	}

	.list_agreement_signing .list_agreement_signing_table .agreement_signing_table_block .uni-table-td{
		padding: 8px;
	}

	.list_agreement_signing .list_agreement_signing_table .agreement_signing_table_block .image {
		width: 10%;
	}

	.list_agreement_signing .list_agreement_signing_table .agreement_signing_table_block .text {
		overflow: hidden;
		width: 30%;
		font-size: 0.5rem;
	}

	.list_agreement_signing .list_agreement_signing_table .agreement_signing_table_block .hits {
		width: 12%;
		font-size: 0.5rem;
	}

	.list_agreement_signing .list_agreement_signing_table .agreement_signing_table_block .praise {
		width: 12%;
		font-size: 0.5rem;
	}

	.list_agreement_signing .list_agreement_signing_table .agreement_signing_table_block .create_time {
		width: 26%;
		font-size: 0.5rem;
	}
	.list_agreement_signing .item_agreement_signing {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding: 0.75rem 1rem;

	}
	.list_agreement_signing .item_agreement_signing+.item_agreement_signing{
		border-top: 1px solid #dbdbdb;
	}
	.list_agreement_signing .item_agreement_signing .left>image {
		position: relative;
		top: 50%;
		transform: translate(0, -50%);
		border-radius: 0.5rem;
	}

	.list_agreement_signing .item_agreement_signing .right_block {
		width: calc(100% - 5rem);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list_agreement_signing .top {
		font-size: 0.9rem;
	}


	.list_agreement_signing .time {
		font-size: 0.6rem;
		color: var(--color_grey)
	}

	.list_agreement_signing .bottom {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		font-size: 0.5rem;
		color: var(--color_grey)
	}

	.list_agreement_signing .see {
		margin-left: 1rem;
	}
	.box_wrap{
		padding: 0.75rem;
	}
	.box_style{
		margin-bottom: 0.75rem;
		padding: 0.375rem;
		display: inline-block !important;
		border: 0.075rem solid #ccc;
		border-radius: 0.375rem;
		overflow: hidden;
	}
	.box_style:nth-child(even){
		margin-left: 0.60rem;
	}
	.box_style:nth-child(even){
		margin-left: 0.60rem;
	}
	.bottom-view,.create_time_block{
		font-size: 12px;
		color: #666666;
	}
	.bottom-view view{
		display: inline-block;
	}
	.bottom-view span{
		margin-left: 5px;
		margin-right: 10px;
	}
</style>
